<template>
  <a-modal
    :title="title"
    :width="800"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
  >
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="父级" v-show="categoryPid != 0">
          <a-input placeholder="请输入父级id" v-model="categoryPidName" disabled/>
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="类目名字">
          <a-input placeholder="请输入类型名字" v-decorator="['name', validatorRules.name]" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="标签排序">
          <a-input-number
            v-decorator="['sort', validatorRules.sort ]"
            placeholder="请输入标签排序"
            :min="1"
            :max="99"
            style="width: 100%"
          />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="是否为热门类目">
          <a-switch v-model="categoryHot" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上下架">
          <a-switch v-model="categoryStatus" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="APP上显示">
          <a-switch v-model="categoryOnApp" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="小程序上显示">
          <a-switch v-model="categoryOnWx" />
        </a-form-item>
        <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="图片" hasFeedback>
          <image-upload text="上传" v-model="categoryImg" :isMultiple="false" ></image-upload>
        </a-form-item>
      </a-form>
    </a-spin>
  </a-modal>
</template>

<script>
import ApiTree from '@/api/common/category';
import ImageUpload from '@/components/ImageUpload'

import { Slime } from '@/mixins/slime';
export default {
  name: 'categoryModal',
  mixins: [Slime],
  components: {
    ImageUpload,
  },
  data() {
    return {
      title: '操作',
      id:0,
      model: {},
      form: this.$form.createForm(this),
      validatorRules: {
        name: { rules: [{ required: true, message: '请输入类型名字!' }] },
        sort: { rules: [{ required: true, message: '请输入排序!' }] },
      },
      categoryPid:'',
      categoryPidName:'',
      categoryHot:false,
      categoryStatus:false,
      categoryOnApp:false,
      categoryOnWx:false,
      categoryImg:'',
      menus: [],
    }
  },
  created() {},
  methods: {
    crudCreate(pid,name) {
      this.crudUpdate({},pid,name)
    },
    crudUpdate(record,pid,name) {
      this.form.resetFields()
      this.model = Object.assign({}, record)
      this.visible = true
      this.$nextTick(() => {
        this.categoryPid = pid
        this.categoryPidName = name
        this.id = this.model.id
        this.categoryHot = this.model.hot == 1 ? true : false
        this.categoryStatus = this.model.status == 1 ? true : false
        this.categoryOnApp = this.model.onApp == 1 ? true : false
        this.categoryOnWx = this.model.onWx == 1 ? true : false
        this.categoryImg = this.model.img
        this.form.setFieldsValue({
          name: this.model.name,
          sort: this.model.sort,
        })
      })
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    //点击确定
    handleOk() {
      const that = this;
      // 触发表单验证
      this.form.validateFields((err, values) => {
        if (!err) {
          that.confirmLoading = true
          let formData = {
            ...values,
            status: (that.categoryStatus?1:0),
            hot: (that.categoryHot?1:0),
            onApp: (that.categoryOnApp?1:0),
            onWx: (that.categoryOnWx?1:0),
            pid: that.categoryPid,
            img: that.categoryImg,
          }
          //订购须知
          if (!this.model.id) {
            ApiTree.getAdd(formData)
            .then((res) => {
              if (res.success) {
                that.$message.success('提交成功')
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
          } else {
            formData = {...formData, id: this.model.id}
            ApiTree.getUpdate(formData)
            .then((res) => {
              if (res.success) {
                that.$message.success('提交成功')
                that.$emit('ok')
              } else {
                that.$message.warning(res.message)
              }
            })
            .finally(() => {
              that.confirmLoading = false
              that.close()
            })
          }
        }
      })
    },
    // 弹窗-树状图内部门数据
    loadDepts({ action, parentNode, callback }) {
      if (action === LOAD_CHILDREN_OPTIONS) {
        ApiTree.getMenusTree(parentNode.id, 1).then((res) => {
          parentNode.children = res.result.map(function (obj) {
            if (obj.subCount > 0) {
              obj.children = null;
            }
            obj = { ...obj, label: obj.title };
            return obj;
          });
          setTimeout(() => {
            callback();
          }, 100);
        });
      }
    },
    //关闭
    handleCancel() {
      this.close()
    },
  }, 
}
</script>

<style lang="less" scoped>
</style>